<template>
  <div class="min-h-screen bg-gray-900 text-gray-200">
    <!-- Header -->
    <header class="border-b border-gray-800 p-4">
      <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-xl font-semibold">数字键盘练习</h1>
        <div class="flex gap-4">
          <button class="hover:text-white" @click="resetPractice">
            <RefreshCwIcon class="h-5 w-5" />
          </button>
          <button class="hover:text-white" @click="showHelp = true">
            <HelpCircleIcon class="h-5 w-5" />
          </button>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8">
      <div class="max-w-2xl mx-auto">
        <!-- Practice Area -->
        <div class="bg-gray-800 rounded-lg p-8 mb-6 shadow-xl">
          <!-- Target Text Display -->
          <div class="mb-8 font-mono text-3xl tracking-wider">
            <div class="h-8 mb-4">
              {{ currentTarget }}
              <span class="animate-pulse">|</span>
            </div>
            <div 
              class="h-8"
              :class="{'text-green-400': isCorrect, 'text-red-400': !isCorrect && userInput.length > 0}"
            >
              {{ userInput || ' ' }}
            </div>
          </div>

          <!-- Virtual Numpad -->
          <div class="grid grid-cols-4 gap-2 max-w-[280px] mx-auto">
            <!-- Num Lock, /, *, - -->
            <button
              v-for="key in topRow"
              :key="key"
              @click="handleInput(key)"
              :class="getButtonClass(key)"
            >
              {{ key }}
            </button>

            <!-- 7-8-9, + -->
            <button
              v-for="key in ['7', '8', '9']"
              :key="key"
              @click="handleInput(key)"
              :class="getButtonClass(key)"
            >
              {{ key }}
            </button>
            <button
              class="bg-gray-700 hover:bg-gray-600 rounded p-4 text-xl font-mono transition-colors row-span-2"
              @click="handleInput('+')"
            >
              +
            </button>

            <!-- 4-5-6 -->
            <button
              v-for="key in ['4', '5', '6']"
              :key="key"
              @click="handleInput(key)"
              :class="getButtonClass(key)"
            >
              {{ key }}
            </button>

            <!-- 1-2-3, Enter -->
            <button
              v-for="key in ['1', '2', '3']"
              :key="key"
              @click="handleInput(key)"
              :class="getButtonClass(key)"
            >
              {{ key }}
            </button>
            <button
              class="bg-gray-700 hover:bg-gray-600 rounded p-2 text-sm font-mono transition-colors row-span-2"
              @click="handleInput('Enter')"
            >
              Enter
            </button>

            <!-- 0, . -->
            <button
              @click="handleInput('0')"
              class="bg-gray-700 hover:bg-gray-600 rounded p-4 text-xl font-mono transition-colors col-span-2"
            >
              0
            </button>
            <button
              @click="handleInput('.')"
              :class="getButtonClass('.')"
            >
              .
            </button>
          </div>
        </div>

        <!-- Stats -->
        <div class="flex justify-between items-center bg-gray-800 rounded-lg p-4">
          <div>
            <span class="text-gray-400">准确率:</span>
            <span class="ml-2 text-green-400">{{ accuracy }}%</span>
          </div>
          <div>
            <span class="text-gray-400">速度:</span>
            <span class="ml-2">{{ speed }} 字/分钟</span>
          </div>
          <div>
            <span class="text-gray-400">进度:</span>
            <span class="ml-2">{{ progress }}%</span>
          </div>
        </div>
      </div>
    </main>

    <!-- Help Modal -->
    <div v-if="showHelp" class="fixed inset-0 bg-white/80 bg-opacity-50 flex items-center justify-center">
      <div class="bg-gray-800 p-6 rounded-lg max-w-md">
        <h2 class="text-xl font-semibold mb-4">使用说明</h2>
        <ul class="list-disc list-inside space-y-2 mb-4">
          <li>使用数字键盘输入显示的数字和运算符</li>
          <li>支持的运算符: + - * /</li>
          <li>按Enter确认并进入下一题</li>
          <li>保持准确性和速度的平衡</li>
        </ul>
        <button 
          @click="showHelp = false"
          class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded"
        >
          关闭
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { RefreshCwIcon, HelpCircleIcon } from 'lucide-vue-next'

const topRow = ['NumLock', '/', '*', '-']

const exercises = [
  '123+456',
  '789-321',
  '55*12',
  '100/25',
  '22+33+44'
]

const currentExerciseIndex = ref(0)
const userInput = ref('')
const startTime = ref(null)
const totalKeystrokes = ref(0)
const correctKeystrokes = ref(0)
const showHelp = ref(false)

const currentTarget = computed(() => exercises[currentExerciseIndex.value])

const isCorrect = computed(() => {
  return userInput.value === currentTarget.value.slice(0, userInput.value.length)
})

const accuracy = computed(() => {
  if (totalKeystrokes.value === 0) return 100
  return Math.round((correctKeystrokes.value / totalKeystrokes.value) * 100)
})

const speed = computed(() => {
  if (!startTime.value) return 0
  const minutes = (Date.now() - startTime.value) / 60000
  return Math.round(totalKeystrokes.value / minutes)
})

const progress = computed(() => {
  return Math.round((currentExerciseIndex.value / exercises.length) * 100)
})

const getButtonClass = (key) => {
  // return `bg-gray-700 hover:bg-gray-600 rounded p-4 text-xl font-mono transition-colors ${
    return key === 'NumLock' ? 'bg-gray-700 rounded p-2 text-xs font-mono transition-colors' : 'bg-gray-700 hover:bg-gray-600 rounded p-4 text-xl font-mono transition-colors'
  // }`
}

const handleInput = (key) => {
  if (!startTime.value && key !== 'NumLock') {
    startTime.value = Date.now()
  }

  if (key === 'NumLock') return

  if (key === 'Enter') {
    if (userInput.value === currentTarget.value) {
      currentExerciseIndex.value = (currentExerciseIndex.value + 1) % exercises.length
      userInput.value = ''
    }
    return
  }

  userInput.value += key
  totalKeystrokes.value++
  if (isCorrect.value) {
    correctKeystrokes.value++
  }
}

const resetPractice = () => {
  currentExerciseIndex.value = 0
  userInput.value = ''
  startTime.value = null
  totalKeystrokes.value = 0
  correctKeystrokes.value = 0
}

onMounted(() => {
  const handleKeydown = (e) => {
    // 防止默认行为（例如小数点可能触发浏览器的查找功能）
    if (e.key === '.' || e.key === '/') {
      e.preventDefault()
    }

    // 映射键盘事件到对应的按键
    const keyMap = {
      'Enter': 'Enter',
      'NumLock': 'NumLock',
      'Decimal': '.',
      '/': '/',
      '*': '*',
      '-': '-',
      '+': '+',
      '0': '0',
      '1': '1',
      '2': '2',
      '3': '3',
      '4': '4',
      '5': '5',
      '6': '6',
      '7': '7',
      '8': '8',
      '9': '9'
    }

    const key = keyMap[e.key]
    if (key) {
      handleInput(key)
    }
  }

  window.addEventListener('keydown', handleKeydown)
})
</script>